<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>单个帖子</title>
    <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/airent/plugins/jquery-ui-1.12.1.custom/jquery-ui.min.js}"></script>
    <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <script th:src="@{/airent/js/vue.js}"></script>
</head>
<body>
<div class="container">
    <div id="app">
        <!--    引入头部-->
        <div th:replace="~{head/topbar::topBar}"></div>
        <!--    显示帖子相关-->
        <div>
            <!--    显示帖子标题-->
            <!--    显示帖子内容-->
            <div v-html="article.articleContent"></div>
        </div>
        <!--    显示留言-->
        <div id="comment" class="card mb-12 animate__animated animate__flipInX">
            <div class="card-header">
                <h5 class="card-title">评论</h5>
            </div>
            <div class="card-body text-dark">

                <div class="ibox-content no-padding">
                    <ul class="list-group">
                        <li class="list-group-item" v-for="reply in article.replyDtos">
                            <div v-if="reply.isprimary==1">
                                <a class="text-info" href="index.html#">{{reply.fromName}}</a>
                                <p v-html="reply.content"></p>
                                <small class="block text-muted"><i class="fa fa-clock-o"></i> 1分钟前</small>
                                <small><a class="text-info reply_btn" data-toggle="modal" data-target="#myModal">回复</a>
                                </small>
                            </div>
                            <div v-if="reply.isprimary==0">
                                <a class="text-info" href="index.html#">{{reply.fromName}}</a>
                                <span>回复@{{reply.toName}}</span>
                                <p v-html="reply.content"></p>
                                <small class="block text-muted"><i class="fa fa-clock-o"></i> 1分钟前</small>
                                <small>
                                    <div @click="getInfor(reply.toId,reply.toName)">
                                        <a class="text-info reply_btn" data-toggle="modal" data-target="#myModal">
                                            回复
                                        </a>
                                    </div>
                                </small>
                            </div>
                        </li>

                    </ul>
                </div>

            </div>

        </div>


    </div>
    <div>
        <!--        回复区域-->
        <div class="row comment-box list-group-item">
            <div class="title">
                <h5>写下你的留言吧！</h5>
            </div>
            <!--    显示回帖区域-->
            <div id="div1"></div>
            <div class="col-md-3 comment-button">
                <button id="comment-submit" type="button"
                        class="btn btn-success"
                        onclick="tijiao(1,editor1,vueApp.article.userId,vueApp.article.userDto.userName)">发送评论
                </button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="div2">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="tijiao(0,editor,vueApp.toId,vueApp.toName)">Save
                    changes
                </button>
            </div>
        </div>
    </div>
</div>
<!--文本编辑器 留言-->
<!--<script type="text/javascript" src="/airent/plugins/editor/wangEditor-3.1.1/release/wangEditor.js"></script>-->
<script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript">

    var E = window.wangEditor
    var editor1 = new E('#div1')
    editor1.config.menus = [
        'bold',
        'head',
        'italic',
        'underline'
    ]
    editor1.config.zIndex = 500
        editor1.create()
</script>

<!--文本编辑 留言-->
<script type="text/javascript">

    var E = window.wangEditor
    var editor = new E('#div2')
    editor.config.menus = [
        'bold',
        'head',
        'italic',
        'underline'
    ]
    editor.create()
</script>
<!--vue-->
<script>
    var vueApp = new Vue({
        el: "#app",
        data: {
            article: {},
            arctileId: 0,
            toId: 0,
            toName: ''
        },
        created() {
            let id = window.localStorage.getItem("id")
            if (id==null){
                window.location.href = '/index.html'
            }
            let url = '/article/singleQuery'
            $.get(url, {
                id: id
            }, function (data) {
                console.log(data)
                vueApp.article = data
            })

            localStorage.removeItem("id");
        },
        methods: {
            getInfor: function (id, name) {
                this.toId = id
                this.toName = name
            }

        }


    })
</script>

<!--自定义函数-->
<script>

    function tijiao(isprimary, e, id, toName) {
        alert(1)
        let aId = vueApp.article.articleId
        let content = e.txt.html()
        if (content == null || content == '' || content == '<p><br></p>') {
            alert("请填写内容")
            return;
        }

        console.log(content)
        let data = {
            content: content,
            toId: id,
            isprimary: isprimary,
            articleId: aId,
            toName: toName
        }
        $.ajax({
            type: "post",
            url: '/article/reply',
            data: JSON.stringify(data),
            contentType: "application/json",
            // contentType: "application/json",
            success: function (data) {
                alert(data)
            }
        });
    }
</script>
</body>
</html>